<template>
    <!-- 放款管理 -->
    <div>
        <div class="fksh">
            <p>逾期催收管理</p>
            <h3>催收管理</h3>
            <!-- 催收记录 -->
            <h4>催收记录</h4>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column label="序号" width="80">
                    1
                </el-table-column>
                <el-table-column :label=item.name v-for="item, index in shenpilishi"><input type="text"
                        style="border: none;" placeholder="请输入内容"></el-table-column>
            </el-table>
            <!-- 按钮 -->
            <span class="dialog-footer">
                <el-button @click=fanhui><el-icon>
                        <ArrowLeftBold />
                    </el-icon>返回</el-button>
                <el-button>保存</el-button>
                <el-button type="primary">提交</el-button>
            </span>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ref } from 'vue'

const router = useRouter()

const fanhui = () => {
    router.go(-1)
}

const shenpilishi = [
    {
        name: '催收方式'
    },
    {
        name: '催收人'
    },
    {
        name: '催收内容'
    },
    {
        name: '催收时间'
    },
]

const tableData = [
    {
        data: ''
    },
]


</script>

<style scoped>
p {
    background-color: rgb(78, 171, 254);
    color: #fff;
    width: 200px;
    height: 40px;
    border-radius: 50px;
    text-align: center;
    line-height: 40px;
}

.fksh {
    height: 100%;
}

.dialog-footer {
    text-align: right;
    display: inline-block;
    width: 100%;
    padding: 20px 0;
}

input:focus-visible {
    outline: none;
    border: none;
    box-shadow: 0 0 0 2px transparent;
    border-bottom: 1.3px solid gainsboro;
}
</style>